<div class="container-fluid">
  <app-page-title title="Checklists" [breadcrumbItems]="breadCrumbItems"></app-page-title>
  <div class="row">
    <div class="col lg 12" style="padding-bottom: 12px;">
      <a routerLink="/checklists/view" class="btn text-primary d-sm-inline-block btn-link"> <i
          class="mdi mdi-arrow-left mr-1"></i> go back</a>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-9">
      <div class="card">
        <div class="card-body">
          <div class="row mb-3">
            <div class="col-sm-4">
              <h4 class="mb-4">Checklists Requirements</h4>
            </div>
            <div class="col-sm-8">
              <div class="text-sm-right">
                <div class="search-box mr-2 mb-2 d-inline-block">
                  <div class="position-relative">
                    <input type="text" [(ngModel)]="queryString" class="form-control" placeholder="Search Security Controls"
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Security Controls'"/>
                    <i class="bx bx-search-alt search-icon"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- end col-->
          </div>
          <div class="dropdown-divider mb-4"></div>
          <div class="col-lg-12">
            <!-- Content Body -->
            <div class="row mb-4" *ngFor="let item of checklistConData.items | stringfilter:queryString; let i = index">
              <div class="col" *ngIf="item.kb_item_id > 1">
                <div class="box media mb-2">
                  <div class="icon mr-2" *ngIf="item.maturity==1">
                    <i class="bx bx-book-content font-size-20 text-warning"></i>
                  </div>
                  <div class="icon mr-2" *ngIf="item.maturity==2">
                    <i class="bx bx-book-content font-size-20 text-success"></i>
                  </div>
                  <div class="icon mr-2" *ngIf="item.maturity==3">
                    <i class="bx bx-book-content font-size-20 text-primary"></i>
                  </div>                   
                  <div class="media-body">
                    <div class="row">
                      <div class="col-sm-12">
                        <h4 class="card-title">{{item.checklist_items_checklist_id}} {{item.checklist_items_content}}</h4>
                      </div>
                      <div class="col-sm-12 mb-3">
                        <div class="text-sm-right">
                          <button data-toggle="collapse" (click)="isCollapsed[i] = !isCollapsed[i]"
                          class="btn-sm btn-primary">Read More</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="collapse" [ngbCollapse]="!isCollapsed[i]">
                  <div class="card shadow-none border card-body mb-0">
                    <pre style="overflow-x: auto;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;">{{item.kb_items_content}}</pre>
                  </div>
                  <div class="row mt-4">
                    <div class="col-sm-6">
                    </div> <!-- end col -->
                  </div>
                  <div class="dropdown-divider"></div>
                </div>

              </div>
            </div>
            <!-- Content Body Ends-->
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="card">
        <div class="card-body">
          <label class="card-title">Checklist Categories</label>
          <div class="dropdown-divider mb-3"></div>
          <div class="row" *ngFor="let item of checklistCatData.items; let i = index">
            <div class="col-2">
              <div class="d-flex align-items-center mb-3">
                <div class="avatar-xs">
                  <span class="avatar-title rounded-circle bg-soft-primary text-primary font-size-18">
                    <i class="mdi mdi-18px mdi-text-box-check"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="col-10 pl-0">
              <a href="javascript:void(0)" class="font-size-14"
                  (click)="changeControlsOnSelect(item.id)">{{item.title}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end row -->
</div>
